<template>
      <div
        style="
          height: 50px;
          line-height: 50px;
          border-bottom: 1px solid #ccc;
          display: flex;
        "
      >
        <div
          style="
            width: 200px;
            padding-left: 30px;
            font-weight: bold;
            color: dodgerblue;
          "
        >
          疫苗管理系统
        </div>
        <div style="flex: 1"></div>
        <div style="width: 150px">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
              </el-avatar>
              {{ name }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </template>

    <script>
    import router from "@/router";
    import Cookies from "js-cookie";
    import {logout} from "../api/login";

    export default {
      name: "Header",
      data() {
        return {
          name: "未登录",
        };
      },
      created() {
        // this.getCookie();
      },
      methods: {
        // getCookie(){
        //   this.Cookies = this.$cookies.getCookie()
        // },
        handleCommand(command) {
          if(command == "profile"){

          }else if(command == "logout"){
            logout().then(res =>{
              Cookies.remove("token");
            })
            router.push("/login");
          }
        },
      },
    };
    </script>
